<template>
	<view>
		<my-search ></my-search>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="item,index in swiperlist" :key="index">
				<view class="swiper-item">
					<image style="width:100%" :src="item.image_src" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 导航区域 -->
		<view class="navi">
			<view @click="jumpcate(index)" v-for="item,index in navilist" :key="index" class="naviitem">
				<image :src="item.image_src" mode="widthFix"></image>
			</view>
		</view>
		
		<!-- 楼层 -->
		    <view class="floor-list" v-for="item,index in floorlist" 
			:key="index">
			  <!-- 楼层 item 项 -->
			  <view class="floor-item">
				<!-- 楼层标题 -->
				<image :src="item.floor_title.image_src" class="floor-title"></image>
			  </view>
			  <!-- 楼层图片区域 -->
			  <view class="floor-img-box"  >
				<!-- 左侧大图片的盒子 -->
				<view  class="left-img-box">
				  <image @click="jumpgoodslist" :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}"  mode="widthFix"></image>
				</view>
				<!-- 右侧 4 个小图片的盒子 -->
				<view class="right-img-box">
				  <view v-if="index2 != 0" class="right-img-item" v-for="item2,index2 in item.product_list" :key="index2">
				   <image @click="jumpgoodslist" :src="item2.image_src" :style="{width:item2.image_width+'rpx'}"  mode="widthFix" ></image>
				  </view>
				</view>
			  </view>
		    </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist:[],
				navilist:[],
				floorlist:[]
			};
		},
		onLoad(){
			// 获取轮播图数据
			this.getswiperlist()
			//获取导航数据
			this.getnavilist()
			// 获取楼层数据
			this.getfloorlist()
		},
		methods:{
			// 点击楼层页面跳转到商品列表页
			jumpgoodslist(){
				uni.navigateTo({
					url:"/pac/goods_list/goods_list"
				})
			},
			//点击导航跳转到分类页面
			jumpcate(index){
				if(index == 0){
					uni.switchTab({
						url:"/pages/cate/cate"
					})
				}
			},
			
			// 获取楼层数据
			async getfloorlist(){
				let res = await uni.$http.get('/api/public/v1/home/floordata')
				console.log(res,"000000000000")
				this.floorlist = res.data.message
			},
			
			
			// 获取导航数据的函数
			async getnavilist(){
				let res = await uni.$http.get('/api/public/v1/home/catitems')
				console.log(res,"****")
				this.navilist = res.data.message
			},
			
			async getswiperlist(){
				//uni.$http.get会返回promise
				try{
					let res  =await uni.$http.get('/api/public/v1/home/swiperdata')
					console.log(res,"------")
					this.swiperlist = res.data.message
				}
				catch(e){
					uni.showToast({
						title: '请求失败',
						duration: 2000
					});
				}
				
			}
		}
	}
</script>

<style lang="scss">
	
	.navi{
		margin-bottom:20px;
		margin-top:20px;
		display:flex;
		//border:1px solid red;
		.naviitem{
			width:25%;
			image{
				width: 90%;
				display: block;
				margin:0 auto;
			}
		}
	}
	
	   .floor-title {
	          height: 60rpx;
	          width: 100%;
	          display: flex;
	        }
	        .right-img-box {
	          display: flex;
	          flex-wrap: wrap;
	          justify-content: space-around;
	        }
	        
	        .floor-img-box {
	          display: flex;
	          padding-left: 10rpx;
	        }
	        
	        .right-img-box {
	          display: flex;
	          flex-wrap: wrap;
	          justify-content: space-around;
	        }
	        
	        .floor-img-box {
	          display: flex;
	          padding-left: 10rpx;
	        }
	        
	.right-img-box {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-around;
	}
	
	.floor-img-box {
	  display: flex;
	  padding-left: 10rpx;
	}

</style>
